<template>
  <div class="home-menu">
    <div class="box">
      <el-menu
        router
        default-active="/index"
        text-color="#fff"
        :collapse="collapse"
        active-text-color="#409eff"
        background-color="#222832"
      >
        <el-menu-item>
          <img src="../assets/images/wumei.png" />
          <span slot="title">物美智能物联网平台</span>
        </el-menu-item>
        <el-menu-item index="/index">
          <i class="el-icon-s-cooperation"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu index="iot">
          <template #title>
            <i class="el-icon-s-home"></i>
            <span>物联网</span>
          </template>
          <el-menu-item
            index="/iot/template"
            @click="addTab({ name: '通用物模型', path: '/iot/template' })"
          >
            <i class="el-icon-picture-outline"></i>
            <span slot="title">通用物模型</span>
          </el-menu-item>
          <el-menu-item
            index="/iot/clientDetails"
            @click="addTab({ name: '云云对接', path: '/iot/clientDetails' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">云云对接</span>
          </el-menu-item>

          <el-menu-item
            index="/iot/group"
            @click="addTab({ name: '设备分组', path: '/iot/group' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">设备分组</span>
          </el-menu-item>

          <!-- <el-menu-item
            index="/iot/firmware"
            @click="addTab({ name: '产品固件', path: '/iot/firmware' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">产品固件</span>
          </el-menu-item>
          <el-menu-item
            index="/iot/category"
            @click="addTab({ name: '产品分类', path: '/iot/category' })"
          >
            <i class="el-icon-wallet"></i>
            <span slot="title">产品分类</span>
          </el-menu-item> -->
        </el-submenu>

        <el-submenu index="emqx">
          <template #title>
            <i class="el-icon-s-data"></i>
            <span>EMQ管理</span>
          </template>
          <el-menu-item
            index="/emqx/client"
            @click="addTab({ name: '客户端', path: '/emqx/client' })"
          >
            <i class="el-icon-picture-outline"></i>
            <span slot="title">客户端</span>
          </el-menu-item>
          <el-menu-item
            index="/emqx/listener"
            @click="addTab({ name: '监听器', path: '/emqx/listener' })"
          >
            <i class="el-icon-wallet"></i>
            <span slot="title">监听器</span>
          </el-menu-item>
          <el-menu-item
            index="/emqx/topic"
            @click="addTab({ name: '消息主题', path: '/emqx/topic' })"
          >
            <i class="el-icon-position"></i>
            <span slot="title">消息主题</span>
          </el-menu-item>
          <el-menu-item
            index="/emqx/subscribe"
            @click="addTab({ name: '消息订阅', path: '/emqx/topic' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">消息订阅</span>
          </el-menu-item>
          <el-menu-item
            index="/emqx/plugin"
            @click="addTab({ name: '插件管理', path: '/emqx/topic' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">插件管理</span>
          </el-menu-item>
          <el-menu-item
            index="/emqx/resource"
            @click="addTab({ name: '规则资源', path: '/emqx/topic' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">规则资源</span>
          </el-menu-item>
          <!-- <el-menu-item
            index="/emqx/rule"
            @click="addTab({ name: '规则引擎', path: '/emqx/topic' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">规则引擎</span>
          </el-menu-item> -->
        </el-submenu>

        <el-submenu index="system">
          <template #title>
            <i class="el-icon-s-finance"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item
            index="/system/role"
            @click="addTab({ name: '角色管理', path: '/system/role' })"
          >
            <i class="el-icon-wallet"></i>
            <span slot="title">角色管理</span>
          </el-menu-item>
          <el-menu-item
            index="/system/menu"
            @click="addTab({ name: '菜单管理', path: '/system/menu' })"
          >
            <i class="el-icon-position"></i>
            <span slot="title">菜单管理</span>
          </el-menu-item>
          <el-menu-item
            index="/system/dept"
            @click="addTab({ name: '部门管理', path: '/system/dept' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">部门管理</span>
          </el-menu-item>
          <!-- <el-menu-item
            index="/system/post"
            @click="addTab({ name: '岗位管理', path: '/system/post' })"
          >
            <i class="el-icon-thumb"></i>
            <span slot="title">岗位管理</span>
          </el-menu-item> -->
        </el-submenu>

        <el-submenu index="monitor">
          <template #title>
            <i class="el-icon-s-platform"></i>
            <span>系统监控</span>
          </template>
          <el-menu-item
            index="/monitor/cache"
            @click="addTab({ name: '缓存监控', path: '/monitor/cache' })"
          >
            <i class="el-icon-picture-outline"></i>
            <span slot="title">缓存监控</span>
          </el-menu-item>
          <!-- <el-menu-item
            index="/monitor/job"
            @click="addTab({ name: '定时任务', path: '/monitor/job' })"
          >
            <i class="el-icon-wallet"></i>
            <span slot="title">定时任务</span>
          </el-menu-item>
          <el-menu-item
            index="/monitor/druid"
            @click="addTab({ name: '数据监控', path: '/monitor/druid' })"
          >
            <i class="el-icon-position"></i>
            <span slot="title">数据监控</span>
          </el-menu-item> -->
        </el-submenu>

        <!-- <el-submenu index="tool">
          <template #title>
            <i class="el-icon-help"></i>
            <span>系统工具</span>
          </template>
          <el-menu-item
            index="/tool/build"
            @click="addTab({ name: '表单构建', path: '/tool/build' })"
          >
            <i class="el-icon-picture-outline"></i>
            <span slot="title">表单构建</span>
          </el-menu-item>
          <el-menu-item
            index="/tool/gen"
            @click="addTab({ name: '代码生成', path: '/tool/gen' })"
          >
            <i class="el-icon-wallet"></i>
            <span slot="title">代码生成</span>
          </el-menu-item>
          <el-menu-item
            index="/tool/swagger"
            @click="addTab({ name: '系统接口', path: '/tool/swagger' })"
          >
            <i class="el-icon-position"></i>
            <span slot="title">系统接口</span>
          </el-menu-item>
        </el-submenu> -->
      </el-menu>
    </div>
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "home-menu",
  data() {
    return {};
  },
  computed: {
    ...mapState(["editableTabsValue", "editableTabs", "tabIndex"]),
    collapse() {
      return this.$store.state.collapse;
    },
  },
  methods: {
    ...mapMutations(["addTab"]),
  },
};
</script>


<style lang="less" scoped>
.home-menu {
  height: 100vh !important;
  position: fixed;
  // transition: width 3s linear;
  .box {
    width: auto; //***
    height: 100%;
    overflow: auto;
  }
  .box::-webkit-scrollbar {
    display: none;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  height: 100% !important;
}
.el-menu {
  height: 100vh;
  border-right: none;
  img {
    width: 32px;
    height: 32px;
    margin-left: -3px;
  }
  img + span {
    margin-left: 7px;
    margin-right: -7px;
    font-weight: bold;
    font-size: 14px;
  }
}
</style>